{% extends "base.html" %}

{% block stylesheets %}
    <style>

    </style>
{% endblock %}


{% block page_content %}
    {% for message in get_flashed_messages() %}
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ message }}
        </div>
    {% endfor %}
    <ol class="breadcrumb">
        <li>Home</li>
        <li>图片水印</li>
        <li class="active">上传水印图</li>
    </ol>
    <div class="row">
        <div class="page-header">
            <div class="col-sm-offset-1">
                <h1>添加水印
                    <small>&nbsp;&nbsp;&nbsp;&nbsp;盲水印</small>
                </h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <form action="" class="form-horizontal" method="post" enctype="multipart/form-data">
                <input type="hidden" id="nonce" name="nonce">

                <div class="form-group">
                    <label class="col-sm-4 control-label">选择含有水印图片：</label>
                    <div class="col-sm-8" id="file_imgGroup">
                        <input class="" id="file_img" type="file" name="img"/>
                        <span class="help-block">注意:请导入图片文件，后缀为jpg,png</span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="file" class="col-sm-4 control-label">选择水印图片：</label>
                    <div class="col-sm-8" id="file_wmGroup">
                        <input type="file" id="file_wm" name="file_wm"/>
                        <span class="help-block">注意:请导入水印图片文件，后缀为png</span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-10">
                        <input class="btn btn-default" id="submit" type="submit" value="上传文件"/>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">功能介绍</div>
                <div class="panel-body">
                    <p>将上传的水印图作为盲水印添加到图片中</p>
                    <p><b>注：</b>只有符合水印图尺寸的图片可以被添加水印</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}

    {# 判断file_img是否为空及后缀 #}
    <script>

        let file_img = $("#file_img");

        $(document).ready(function () {
            $("#submit").click(function () {
                var file = file_img.val();
                if (file == "") {
                    let file_imgGroup = $("#file_imgGroup");
                    file_imgGroup.addClass("has-error");
                    file_imgGroup.append('<span class="help-block" id="file_imgtextHelp1">文件不能为空！</span>');
                    return false
                } else {
                    //检验文件类型是否正确
                    var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
                    if (exec != "png" && exec != "jpg") {
                        let file_imgGroup = $("#file_imgGroup");
                        file_imgGroup.addClass("has-error");
                        file_imgGroup.append('<span class="help-block" id="file_imgtextHelp2">文件后缀应为png,jpg!</span>');
                        return false;
                    }
                }
                return true;
            });
        });

        file_img.click(function () {
                $("#file_imgtextHelp1").remove();
                $("#file_imgtextHelp2").remove();
                $("#file_imgGroup").removeClass("has-error");
            }
        )


    </script>

    {# 判断file_wm是否为空及后缀 #}
    <script>

        let file_wm = $("#file_wm");

        $(document).ready(function () {
            $("#submit").click(function () {
                var file = file_wm.val();
                if (file == "") {
                    let file_wmGroup = $("#file_wmGroup");
                    file_wmGroup.addClass("has-error");
                    file_wmGroup.append('<span class="help-block" id="file_wmtextHelp1">文件不能为空！</span>');
                    return false
                } else {
                    //检验文件类型是否正确
                    var exec = (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
                    if (exec != "png") {
                        let file_wmGroup = $("#file_wmGroup");
                        file_wmGroup.addClass("has-error");
                        file_wmGroup.append('<span class="help-block" id="file_wmtextHelp2">文件后缀应为png!</span>');
                        return false;
                    }
                }
                return true;
            });
        });

        file_wm.click(function () {
                $("#file_wmtextHelp1").remove();
                $("#file_wmtextHelp2").remove();
                $("#file_wmGroup").removeClass("has-error");
            }
        )


    </script>

{% endblock %}